import {
  AUDIO_SYNTHESIS_FILE_CLEAN_DAYS,
  AUDIO_SYNTHESIS_FINALLY_STATUS_LIST,
  audioSynthesisStatus,
  AudioSynthesisStatus
} from "common/utils/data";
import { Fragment, useContext, useEffect, useState } from "react";
import { Context } from "../Provider";
import {
  CheckCircleTwoTone, ClockCircleTwoTone, CloseCircleTwoTone, DownloadOutlined,
  HourglassTwoTone, InfoCircleOutlined, InfoCircleTwoTone, LoadingOutlined
} from "@ant-design/icons";
import { Button, Space, theme, Tooltip } from "antd";
import { completeImgUrl } from "common/utils/utils";

export default function Status({ data }: {
  data: API.AudioSynthesisIndexEarbuds2EarbudsResult;
}){
  const [currentData , setCurrentData]= useState(data);

  const { token } = theme.useToken();

  const {
    addCheckStatusUuid,
    globalWorkList,
    checkStatusMap,
  } = useContext(Context);

  useEffect(() => {
    if(!AUDIO_SYNTHESIS_FINALLY_STATUS_LIST.includes(data.status as AudioSynthesisStatus)){
      addCheckStatusUuid?.(data.uuid);
    }
  }, []);

  const currentInMap = checkStatusMap?.[data.uuid];
  useEffect(() => {
    if(currentInMap){
      setCurrentData(currentInMap);
    }
  }, [currentInMap]);

  const currentIndex = globalWorkList?.findIndex(item=>item.uuid === data.uuid)!;

  return <Space direction="horizontal">
    <Space>
      {(()=>{
        if(currentData.status === AudioSynthesisStatus.SUCCESS){
          return <CheckCircleTwoTone
            twoToneColor={token.colorSuccess}
          />
        }
        if(currentData.status === AudioSynthesisStatus.FAIL){
          return <CloseCircleTwoTone
            twoToneColor={token.colorError}
          />
        }
        if(currentData.status === AudioSynthesisStatus.TIMEOUT){
          return <ClockCircleTwoTone
            twoToneColor={token.colorError}
          />
        }
        if(currentData.status === AudioSynthesisStatus.WAITING){
          return <HourglassTwoTone />
        }
        return <LoadingOutlined spin />
      })()}
      <span>{audioSynthesisStatus[currentData.status as AudioSynthesisStatus]}</span>
      {
        currentData.status === AudioSynthesisStatus.SUCCESS &&
        <Fragment>
          {
            (data.targetAudioFile ? <Button
              size="small"
              className="px-0 py-0"
              type="link"
              icon={<DownloadOutlined />}
              download
              href={completeImgUrl(data.targetAudioFile, '?download=true')}
              target="_blank"
            /> : <span style={{color: 'rgba(0, 0, 0, 0.45)'}}>已过期</span>)
          }
          <Tooltip title={`文件${AUDIO_SYNTHESIS_FILE_CLEAN_DAYS}天有效`}>
            <InfoCircleOutlined
              style={{
                color: 'rgba(0, 0, 0, 0.45)'
              }}
            />
          </Tooltip>
        </Fragment>
      }
    </Space>
      {currentData.status === AudioSynthesisStatus.WAITING && currentIndex !== -1 ?
      <span>
        前面还有 {currentIndex} 个
      </span>
        : null}
  </Space>
}
